<template>
  <div class="container">
    <div class="card-table">
      <el-button style="margin-bottom:12px;" icon="el-icon-plus" type="primary" @click="$router.push({ name:'addOneFurnaceForm'})">
        新增</el-button>
      <el-table :cell-style="{padding:0,'padding-left':0,'padding-right':0}" :header-cell-style="getRowClass"
        :data="tableData" style="width: 100%">
        <el-table-column align="center" label="创建时间" width="150">
          <template slot-scope="{row}">
            {{row.createTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="更新时间" width="150">
          <template slot-scope="{row}">
            {{row.updateTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="炉号" width="">
          <template slot-scope="{ row }">
            {{row.stoveNumber}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="出炉日期" width="150">
          <template slot-scope="{row}">
            {{row.stoveOutTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="装炉日期" width="150">
          <template slot-scope="{row}">
            {{row.chargeTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="stoveCode" label="温控架" width="">
        </el-table-column>
        <el-table-column align="center" prop="count" label="数量" width="">
        </el-table-column>
        <el-table-column align="center" prop="weight" label="重量" width="">
        </el-table-column>
        <el-table-column align="center" label="装炉方式" width="">
          <template slot-scope="{row}">
            {{row.chargeType}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="点火时间" width="">
          <template slot-scope="{row}">
            {{row.startTime}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="runTime" label="运行时间" width="">
        </el-table-column>
        <el-table-column align="center" prop="endTime" label="闭火时间" width="">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{row}">
            <div v-if="row.isOutHelp">
              <el-tag size="medium" v-if="!row.isOutStove" type="warning">外加工未完成</el-tag>
              <el-tag size="medium" v-else type="success">外加工已完成</el-tag>
            </div>
            <div v-else>
              <el-tag size="medium" v-if="!row.isOutStove" type="warning">待出炉</el-tag>
              <el-tag size="medium" v-else type="success">已出炉</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="装炉表" width="65">
          <template slot-scope="{row}">
            <a v-if="row.chargeTable" :href="row.chargeTable + '?response-content-type=application/octet-stream'" download>下载</a>
            <a v-else disabled>下载</a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="曲线表" width="65">
          <template slot-scope="{row}">
            <a v-if="row.curveTable" :href="row.curveTable + '?response-content-type=application/octet-stream'" download>下载</a>
            <a v-else disabled>下载</a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="质检表" width="65">
          <template slot-scope="{row}">
            <a v-if="row.queInspectionTable" :href="row.queInspectionTable + '?response-content-type=application/octet-stream'" download>下载</a>
            <a v-else disabled>下载</a>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="{row}">
            <div style="padding:12px;">
              <!-- <template v-if="!row.isOutStove">
                <el-button class="operateBtn" v-if="row.isOutHelp" @click="dialogFormVisible=true,selectRow=row"
                  icon="el-icon-finished" type="text">完成</el-button>
                <a :href="row.chargeForm" target="downLoadFile">下载</a>
              </template> -->
              <el-button class="detailBtn" icon="el-icon-tickets" type="text" @click="detail(row)">详情</el-button>
              <el-button class="operateBtn" @click="edit(row)" icon="el-icon-edit-outline"
                type="text">编辑</el-button>
              <el-button class="operateBtn" icon="el-icon-delete" @click="deleteOne(row._id)"
                type="text">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagin" v-if="total>0">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <el-dialog title="出炉信息" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
        <el-form ref="outStoveForm" :rules="rules" label-width="120px" :model="outStoveForm">
          <el-form-item :label="selectRow.isOutHelp?'负责人':'出炉人'" prop="outStoveMan">
            <el-input style="width:300px;" v-model="outStoveForm.outStoveMan" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="生产结束时间" prop="produceEndTime">
            <el-date-picker style="width:300px;" v-model="outStoveForm.produceEndTime" type="datetime"
              placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="outStove('outStoveForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { oneFurnaceUpload, oneFurnaceCreate, oneFurnaceGet, oneFurnaceUpdate, oneFurnaceDelete } from '@/api/crucible.js'
import { nomalPages } from '@/mixin'
export default {
  name: 'test',
  components: {},
  data() {
    return {
      showDetail: '', // 选中展开的详情
      selectRow: {},
      pageSize: 10,
      currentPage: 1,
      total: 1,
      form: {},
      outStoveForm: {},
      tableData: [
      ],
      row: '',
      dialogFormVisible: false,
      specifications: [],
      diameters: [],
      rules: {
        outStoveMan: [
          { required: true, message: '请输入负责人', trigger: 'change' }
        ],
        produceEndTime: [
          { required: true, message: '请输入完成事件', trigger: 'change' }
        ]
      }
    }
  },
  mixins: [nomalPages],
  computed: {},
  watch: {},
  created() { },
  mounted() {
    // getCrucibleFormConditions().then(res => {
    //   this.diameters = res.data.data.diameter
    //   this.specifications = res.data.data.specification
    // })
  },
  methods: {
    clickDetail(row) {
      if (this.showDetail !== row._id) {
        this.showDetail = row._id
      } else {
        this.showDetail = ''
      }
    },
    outStove(formName) {
      // const Row = JSON.parse(JSON.stringify(this.selectRow))
      // const dateNow = new Date()
      // var year = dateNow.getFullYear()
      // var month = dateNow.getMonth() + 1 // js从0开始取
      // var date1 = dateNow.getDate()
      // var hour = dateNow.getHours()
      // var minutes = dateNow.getMinutes()
      // var second = dateNow.getSeconds()
      // const payload = {
      //   ...Row,
      //   workOrderEndTime: year + '-' + month + '-' + date1 + ' ' + hour + ':' + minutes + ':' + second,
      //   outStoveMan: this.outStoveForm.outStoveMan,
      //   isOutStove: true,
      //   produceEndTime: this.outStoveForm.produceEndTime,
      //   crucibleFormingId: Row.crucibleForming._id
      // }
      // crucibleFirstRoastUpdate(payload).then(res => {
      //   if (res.data.code === 200) {
      //     this.$message({
      //       message: '出炉成功',
      //       type: 'success'
      //     })
      //     this.$refs[formName].resetFields()
      //     this.dialogFormVisible = false
      //     this.getAllData()
      //   } else {
      //     this.$message({
      //       message: res.data.message,
      //       type: 'warning'
      //     })
      //   }
      // })
    },
    edit(row) {
      const json = JSON.stringify(row)
      this.$router.push({
        name: 'addOneFurnaceForm',
        query: {
          row: json
        }
      })
    },
    detail(row) {
      const json = JSON.stringify(row)
      this.$router.push({
        name: 'CORdetail',
        query: {
          row: json
        }
      })
    },
    deleteOne(_id) {
      const params = {
        id: _id
      }

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        oneFurnaceDelete(params).then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAllData()
          } else {
            this.$message({
              type: 'warging',
              message: res.data.message
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getAllData() {
      const params = {
        pageSize: this.pageSize,
        currPage: this.currentPage
      }
      oneFurnaceGet(params).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.data.data);
          this.tableData = res.data.data.data
          this.total = res.data.data.count
        }
      })
    }
  }
}
</script>

<style  scoped>
.cellTable {
  height: 26px;
  border-bottom: thin solid rgb(232, 237, 241);
  color: #999;
}

.cell {
  padding: 0;
}

.operateBtn {
  color: $primary;
  padding: 8px;
  font-size: 12px !important;
  margin: 0 !important;

  &:hover {
    color: rgb(141, 142, 197);
  }
}

.detailBtn {
  color: $warning;
  padding: 8px;
  font-size: 12px !important;
  margin: 0 !important;

  &:hover {
    color: rgb(223, 197, 112);
  }
}

.pagin {
  display: flex;
  justify-content: right;
  padding: 12px 12px 0 0;
}

.pagin  .el-pager .active {
  background-color: $primary !important;
}
a{
  text-decoration: none;
  font-size: 12px;
  color: rgb(6, 97, 233);
  &[disabled = "disabled"]{
    color:#999;
    cursor: not-allowed;
  }
}
</style>
